<template>
  <div>
    <content-panel
      ref="content"
      title="在线用户"
      search-label-width="88px"
      :search-props="searchProps"
      :table-props="tableProps"
      :tab-values="loginTypeList"
      tab-prop="type"
      :show-tab-all="false"
      :wrap-query-param-func="wrapQueryParamFunc"
      list-api="getOnlineUsers"
      get-api="getOnlineUser"
      delete-api="deleteOnlineUsers"
      :is-selectable="checkSelection"
      @handle-selection-change="handleSelectionChange"
    >
      <template #ops>
        <el-button
          v-hasPerm="['monitor:online:batchLogout']"
          type="danger"
          plain
          :icon="Delete"
          :disabled="curSelectionTokenList.length === 0"
          size="small"
          @click="handleBatchLogout"
        >强退
        </el-button>
      </template>
      <template #token="scope">
        <el-tooltip
          placement="top"
          effect="dark"
        >
          <template #content>
            <span class="tooltip-content">{{ scope.row.token }}</span>
          </template>
          <span class="token-box">{{ scope.row.token }}</span>
        </el-tooltip>
      </template>
      <template #operate="scope">
        <el-button
          v-has-perm="['monitor:online:forceLogout']"
          size="small"
          type="danger"
          :icon="Delete"
          link
          @click="handleForceLogout(scope.row)"
        >
          强退
        </el-button>
      </template>
    </content-panel>
  </div>
</template>

<script setup>
import { Delete } from '@element-plus/icons-vue'

const content = useTemplateRef('content')
const tableProps = ref([
  {label: '会话编号', prop: 'id', width: '80px'},
  {label: '用户名称', prop: 'userName'},
  {label: '客户端', prop: 'loginType'},
  {label: '令牌', prop: 'token', type: 'token'},
  {label: 'ip', prop: 'ip'},
  {label: '登录地址', prop: 'ipAddress'},
  {label: '最后访问时间', prop: 'lastActiveTime'},
  {label: '过期时间', prop: 'expireTime'},
  {label: '操作', type: 'operate'}
])

const searchProps = ref([
  {label: '用户名称', prop: 'userName', type: 'input'}
])

const loginTypeList = ref([
  {label: '管理系统', value: 'admin'},
  {label: '微信小程序', value: 'wx'},
  {label: 'App应用', value: 'app'},
])

const wrapQueryParamFunc = async params => {
  if (!params.userName) return params
  const result = {...params}
  await $xl.apis.getAdminUserByKeyword({
    jointUrl: '/' + params.userName
  }).then(res => {
    result.userId = res.data.id
  })
  return result
}
// 强退按钮操作
const handleForceLogout = (row) => {
  $xl.modal.confirm(`是否确认强退名称为"${ row.userName }"的用户？`).then(() => {
    $xl.apis.forceLogout({
      params: {
        type: row.loginType,
        token: row.token
      }
    }).then(() => {
      content.value.getList()
      $xl.modal.msgSuccess('强退成功')
    }).catch(err => {
      $xl.modal.msgError(err)
    })
  })
}

// 多选校验
const curSelectionType = ref('')
const curSelectionTokenList = ref([])
const checkSelection = (row) => {
  if (curSelectionType.value === '') return true
  return row?.loginType === curSelectionType.value
}
// 多选触发
const handleSelectionChange = (rows) => {
  curSelectionType.value = rows[0]?.loginType || ''
  curSelectionTokenList.value = rows.map(row => row?.token) || []
}
// 批量强退按钮操作
const handleBatchLogout = () => {
  $xl.modal.confirm('是否确认批量强退？').then(() => {
    $xl.apis.forceLogoutBatch({
      params: {
        type: curSelectionType.value,
        tokens: curSelectionTokenList.value.join(',')
      }
    }).then(() => {
      content.value.getList()
      $xl.modal.msgSuccess('强退成功')
    }).catch(err => {
      $xl.modal.msgError(err)
    })
  })
}


</script>


<style lang="scss" scoped>
.token-box {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  display: inline-block;
  width: 100%;
}

.tooltip-content {
  display: block;
  max-width: 300px;
}
</style>
